<template>
  <div class="hello">
    <div>value-----{{ data }}</div>
    <button @click="handleUpdateTime">无参数刷新</button>
    <button @click="handleUpdateTimeParam">有参数刷新</button>
  </div>

  <div class="hello" style="display: flex; align-items: flex-start">
    <div style="width: 60vw">
      <p>value:{{ state }}</p>
    </div>
    <div style="width: 39vw">
      <button @click="handleUpdate">更新storage</button>
      <button @click="handleDelete">删除storage</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useDate from '@/hooks/useDate'
import { useLocalStorage } from '@/hooks/useLocalStorage.ts'
const { data, refresh } = useDate(+new Date(), {
  format: 'YYYY-MM-DD HH:mm:ss',
  method: 'hour',
  methodParam: 3,
})

const handleUpdateTime = () => {
  refresh()
}

const handleUpdateTimeParam = () => {
  refresh('2021-7-16 12:17:00')
}

const state = useLocalStorage('useLocalStorage', { a: 231 })

const handleUpdate = () => {
  state.value = { a: Math.random() }
}

const handleDelete = () => {
  state.value = undefined
}
</script>
